import React from 'react'
import { X } from 'lucide-react'

interface URLCardProps {
  card: {
    id: string
    name: string
    url: string
  }
  onDelete: (id: string) => void
}

const URLCard: React.FC<URLCardProps> = ({ card, onDelete }) => {
  return (
    <div className="relative group">
      <a
        href={card.url}
        target="_blank"
        rel="noopener noreferrer"
        className="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow"
      >
        <div className="w-12 h-12 mb-2 bg-gray-200 rounded-full flex items-center justify-center overflow-hidden">
          <img
            src={`https://www.google.com/s2/favicons?domain=${card.url}&sz=64`}
            alt={card.name}
            className="w-8 h-8"
          />
        </div>
        <span className="text-sm text-center">{card.name}</span>
      </a>
      <button
        onClick={() => onDelete(card.id)}
        className="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
      >
        <X size={16} />
      </button>
    </div>
  )
}

export default URLCard